<template>
  <div>
    <!-- 页头 -->
    <div class="navbar">
      <div class="left">
        <img src="../assets/82ed17ba7bf444a09a31a03761b38ac7.png" alt="" />
      </div>
      <h1 class="pingtai">云平台及大数据</h1>
      <div class="right">
        <img src="../assets/ba3d8810ff5e4e4db3e182d8222f6563.png" alt="" />
      </div>
    </div>
    <div class="beijing">
      <!-- 图片 -->
      <div class="tupian">
        <img src="../assets/loginImg.png" alt="" />
      </div>
      <!-- 注册表 -->
      <div class="denglu">
        <!-- 登录扫码分项 -->
        <div class="saoma">
          <!-- 扫码登录 -->
          <div style="margin-right: 10px">
            <h3>扫码登录</h3>
          </div>
          <div>
            <h3>账户登录</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.center {
  margin: 0 auto;
  text-align: center;
}
// 页头样式
.navbar {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.left {
  margin-left: 200px;
}
.right {
  margin-right: 200px;
  margin-top: 15px;
}
.pingtai {
  margin-right: 600px;
  margin-top: 15px;
}
.beijing {
  background-image: url(../assets/loginBackgroundColor.f41eb68.jpg);
  display: flex;
  background-repeat: no-repeat;
  background-position: top;
  background-size: 100% auto;
  user-select: none;
}
.tupian {
  padding-top: 12px;
}
.denglu {
  margin-top: 50px;
  width: 350px;
  height: 425px;
  border: 1px solid black;
  background-color: #fff;
}
.saoma {
  display: flex;

  margin-left: 100px;
}
</style>